<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'

import api from '@/api/statistics'

const option = ref(null)

onMounted(() => {
  getSpaceTypeList()
})

const getSpaceTypeList = async () => {
  const result = await api.getSpaceTypeList()
  if (result.code === 200) {
    const data = result.data.map(item => ({
      value: item.count, name: item.label, itemStyle: { color: item.extra }
    }))
    const category = result.data.map(item => item.label)
    const series = result.data.map(item => ({
      value: item.count,
      itemStyle: { color: item.extra }
    }))
    option.value = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        show: false
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        // axisLabel: {
        //   color: '#fff' 
        // },
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisTick: {
          lineStyle: {
            color: '#fff'
          }
        },
        show: false
      },
      yAxis: {
        type: 'category',
        data: category,
        axisLabel: {
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisTick: {
          lineStyle: {
            color: '#fff'
          }
        }
      },
      series: [
        {
          name: '空域类型',
          type: 'bar',
          data: series,
          label: {
            show: true,
            position: 'insideRight',
            color: '#fff'
          }
        },
      ]
    }
    use([
      CanvasRenderer,
      PieChart,
      TitleComponent,
      TooltipComponent,
      LegendComponent,
    ])
  } else {
    ElMessage.error(result.msg)
  }
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>